<template>
  <div class="myOrders">
    <!-- 发货状态 -->
    <div class="orders-stauts">
      <!-- 卖家已发货， 退款 -->
      <div  style="background:#fff"  class="stauts-cell"  >
        <span class="fl">
        <img slot="icon" src="/static/images/profile/s0.jpg"  style="height:18px;width:16px;" class="ncche">
        </span>
        <div class="stauts-infos">
          <section>{{items.statusName}}</section>
        </div>
      </div>
 
     
    </div>
    <!-- 收货地址 -->
    <div class="orders-address">
      <span class="fl">
        <img :src="addressIcon" style="height:20px;width:20px"  class="addressIcon">
      </span>
      <div class="address-infos">
        <div class="fl">收件人： {{items.consignee}}</div>
        <div class="fr">{{items.mobile}}</div>
      </div>
      <div class="address-infos">
        <div class="fl">收获地址：{{items.address}}</div>
      </div>
    </div>
    <!-- 商品信息 -->
    <div class="orders-product">
      <div class="orders-store">{{items.storeName}}  <img  style="width:6px;height:11px;margin-right:12px;margin-left:8px;" class="goRight" src="/static/images/go.png"/></div>
      <div v-for="(goods,list) in items.itemsList" :key='list' class="orders-goods">
        <img :src="goods.productThumb"  class="goods-img">
        <div>
          <section class="goods-title">{{goods.productName}}</section>
          <div class="goods-price">
            <section class="fl">￥<span style="font-size: 15px;">{{goods.price}}.</span>00</section>
            <section class="fr">x{{goods.num}}</section>
          </div>
        </div>
      </div>
    </div>
    <!-- 订单总价 -->
    <div class="orders-totals">
      <section>
        <span class="fl">商品总价</span><span class="fr">￥{{items.totAmnt}}</span>
      </section>
      <section>
        <span class="fl">优惠价</span><span class="fr">0</span>
      </section>
      <section>
        <span style="color:#333333" class="fl">订单总价</span><span class="fr">￥{{items.totAmnt}}</span>
      </section>
     
    </div>
    <!-- 联系人 -->
    <!-- <div class="orders-totals"> -->
      <!-- <section>
        <span class="fl">联系卖家：</span><span style="color: #333;margin-left: 20px;">{{items.storeName}}</span>
        <span class="fr"><img slot="icon" :src="come" style="height:11px;width:11px"  class="come "></span>
      </section> -->
    <!-- </div> -->
    <!-- 订单号 -->
    <div class="orders-totals" >
      <section>
        <span class="fl">订单编号：{{orderId}}</span>
      </section>
      <section>
        <span class="fl">创建时间：{{items.orderDate}}</span>
      </section>
      <section>
        <span class="fl">交易号：{{items.transSn}}</span>
      </section>
    </div>
          <div class="bottom">
                    <!-- <span class="span1" :class="{ 'span3': '待付款' ==val.statusName ,'span2': '确认收货' ==val.statusName }">付款</span> -->
                    <span @click='startPay()' v-if="'待付款'==items.statusName" class="span3">付款</span>
                    <span @click='OrderCancel()' v-if="'待付款'==items.statusName" class="span1">取消订单</span>
                
                    <!-- <span class="span1">查看物流</span> -->
                    <!-- <span class="span1">去评价</span> -->
                    <span @click='OrderReceipt()' v-if="'已发货'==items.statusName"  class="span1">确认收货</span>
              
       </div>
  </div>
 
</template>

<script>
import api from '@/utils/api'
import wx from 'wx'
export default {
  name: 'myOrders',
  data() {
    return {
      come: '../../static/images/come.png',
      ncche:'../../static/images/profile/ncche.png',
      lvren: '../../static/images/profile/lvren.png',
      nvpage: '../../static/images/profile/nvpage.png',
      addressIcon: '../../static/images/address_icon.png',
      addressIcon: '../../static/images/address_icon.png',
      goods: '../../static/images/thumb1541727915131out.jpg',
      stauts: 3,
      items:'',
      orderId:''
    }
  },
  created() {
 
  },
  onShow(){
   console.log(this.$store.state.otherBack)
    this.orderId =this.$route.query.orderId
      this.BuyerOrderDetail();
       this.$store.commit('GETotherBack',false);
  },
  methods:{
      async BuyerOrderDetail () {
          let data=JSON.stringify({"orderId": this.$route.query.orderId})
 
      const res = await api.BuyerOrderDetail({"data":data});
 
      this.items=res.data ;
    //   for(let i=0;i<res.data.length;i++){
         
    //         newData[i].itemsList[0].sizeNameJson=JSON.parse(res.data[i].itemsList[0].sizeNameJson )
    //   }

    console.log(this.orderList)
   
     
    },
        async startPay(val){ // 支付
       let data=JSON.stringify({"orderId":this.orderId})
  
      const res = await api.BuyerOrderPayInfo({"data":data});
                                     
        this.pay(res.data); //调取支付
    },
     async OrderCancel(val){ // 取消订单
            let that =this;
            wx.showModal({
                title: '',
                content: '您确定取消当前订单吗？',
                success: async function (res) {
                if (res.confirm) {
                    let data=JSON.stringify({"orderId":that.orderId})
                    const Nres = await api.BuyerOrderCancel({"data":data});
                    if(Nres.status==0){
                       that.$store.commit('GETotherBack',true);
                       console.log(that.$store.state.otherBack)
                       wx.navigateBack()
                     
                        
                    }
                }
                }
            })

    },
    
  
      async OrderReceipt(){ // 确认收货
         let that =this;
            wx.showModal({
                title: '',
                content: '您是否确认收货？',
                success: async function (res) {
                if (res.confirm) {
                    let data=JSON.stringify({"orderId":that.orderId})
                    const Nres = await api.BuyerOrderReceipt({"data":data});
                    if(Nres.status==0){
                        that.BuyerOrderDetail();
                        that.$store.commit('GETotherBack',true);
                    }
                }
                }
            })
           
    },
    
      async pay (val) {
        let that =this
         let payInfoReq = {}
          payInfoReq =val;
          payInfoReq.payMode = "weChatPay";
          payInfoReq.payClient = "jsapi_buyer_mini";//h5
           payInfoReq.openId = wx.getStorageSync('openId')
          //  'o4jjr4qU9XryOBXACp5yFv3u_Hlw'

        //  let data=JSON.stringify({"payProductName":"订单费","payAmnt":10,"orderId":"2c0b8bea556041af9e36094ae55f67df","payProductDesc":"购买Ee","payMode":"weChatPay","payId":"T418112617260000003","payName":"orderPay","payClient":"jsapi_buyer_mini",'openId':'o4jjr4qU9XryOBXACp5yFv3u_Hlw'})
            let data=JSON.stringify(payInfoReq)
            const res = await api.BuyerOrderPay({"data":data});
            
            // console.log('pay页直接支付,请求结果', res);
            // if (res.errno === 0) {
                
                let payParam = res.data.payInfo;
        console.log(payParam)
                wx.requestPayment({
                'timeStamp': payParam.timeStamp,
                'nonceStr': payParam.nonceStr,
                'package': payParam.package,
                'signType': payParam.signType,
                'paySign': payParam.paySign,
                'success': function (res) {
                    // wx.navigateTo({
                    // url: '../pay/payResult?status=1'
                    // })
                    
                    that.BuyerOrderDetail();
                    that.$store.commit('GETotherBack',true);
                },
                'fail': function (res) {
                    // wx.navigateTo({
                    // url: '../pay/payResult?status=0'
                    // })
                }
                })
   
    }
  }
//  order/BuyerOrderDetail
}
</script>

<style lang="scss">
  .myOrders{
    .fl{
      float: left;
    }
    .fr{
      float: right;
    }
  }
</style>
<style lang="scss" scoped>
     .bottom{
      height: 49px;
      padding-right:4vw;
      height: 50px;;
      width: 96vw;
      background:#fff;
    span{
        
        float: right;
        margin-right: 15px;
        font-size: 14px;
        text-align: center;
        display: inline-block;
        width: 69px;;
        margin-top: 10px;
        border-radius: 2px;
    }
    span:nth-child(1){
        margin-right: 0;    
    }
}
.span1{
    line-height: 29px;
    border:1px solid  rgba(51,51,51,1);
    color: rgba(51,51,51,1);;
}  
.span2{
    line-height: 29px;
    border:1px solid  rgba(51,51,51,1);
    color: #FD6D1F;
}  
.span3{
  
color: #fff;
line-height: 31px;
background: #FD6D1F;
  }  
  .myOrders{
    
    background: #f7f7f7;

      .ncche, .lvren, .nvpage{
        object-fit: contain;
      }
    .orders-stauts{
      height: 62px;
      background: #fff;
      .come{
        margin: 26px 15px;
      }
      .ncche{
        margin: 20px 15px;
      }
      .lvren, .nvpage{
        margin: 22px 15px;
      }
      .stauts-infos{
        float: left;
        margin: 19px 0;
        :first-child{
          font-size: 14px;
          line-height: 20px;
          color: #359A2B;
        }
       :nth-child(2){
          font-size: 12px;
          line-height: 20px;
          color: #9b9b9b;
        }
      }

    }
    .orders-address{
      background: #fff;
      margin: 15px 0;
      padding: 15px;
      .address-infos{
        font-size: 14px;
        margin:0 35px;
        overflow: hidden;
        color: #333;
      }
      .addressIcon{
        object-fit: contain;
        margin-top: 10px;
      }
    }
    .orders-product{
      background: #fff;
      margin: 15px 0;
      .orders-store{
        font-size: 14px;
        padding: 15px 0;
        margin: 0 15px;
        border-bottom: 1px solid #f8f8f8;
      }
      .orders-goods{
        overflow: hidden;
        .goods-img{
          width: 90px;
          height: 79px;
          object-fit: cover;
          margin: 10px 15px 15px 15px;
          float: left;
        }
        .goods-title{
          font-size: 13px;
          line-height: 16px;
          height: 33px;
        margin-top:8px;
          width: 53vw;;
          margin-right: 50px;
          overflow: hidden;
          color: #333333;
          margin-left: 2vw;
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box;
          /* autoprefixer: off */
          -webkit-box-orient: vertical;
          /* autoprefixer: on */
          -webkit-line-clamp: 2;
        }
        .goods-price{
          margin-top: 26px;
          overflow: hidden;
          section{
            font-size: 12px;
            line-height: 24px;
          }
        :nth-child(2){
          margin-right: 15px;
          }
        }
      }
    }
  .orders-totals{
      background: #fff;
      margin: 15px 0;
      padding: 10px 15px;
      section{
        overflow: hidden;
        color: #8d8d8d;
        font-size: 12px;
        line-height: 24px;
      }
  }
  }
</style>